<template>
	<view class="ops-detail">
		<site-basic-cell :name="workOrder?.siteName"></site-basic-cell>
		<view class="card">
			<view class="card__header">
				<view class="card__header-before"></view>
				<text class="card__header-title">{{ $t('ops.detail.work.order.title') }}</text>
				<text v-if="statusConfig" class="card__header-status"
					:style="{ color: statusConfig.color }">{{ $t(statusConfig.name) }}</text>
			</view>
			<up-line color="#132034" margin="38rpx 0 30rpx"></up-line>
			<view class="card__content">
				<view class="card-cell">
					<text>{{$t('ops.detail.work.order.cell-1')}} {{ id }}</text>
				</view>
				<view class="card-cell">
					<text>{{$t('ops.detail.work.order.cell-2')}} {{ workOrder?.siteId }}</text>
				</view>
				<view class="card-cell">
					<text>{{$t('ops.detail.work.order.cell-3')}} {{ workOrder?.repairman || "-" }}</text>
				</view>
				<view class="card-cell">
					<text>{{$t('ops.detail.work.order.cell-4')}} {{ dateParse(workOrder?.createTime) }}</text>
				</view>
				<view class="card-cell">
					<text>{{$t('ops.detail.work.order.cell-5')}} {{ workOrder?.content }}</text>
				</view>
				<!-- <view class="card-cell">
					<text>备注说明：{{ workOrder?.content }}</text>
				</view> -->
				<scroll-view scroll-x>
					<view class="card-images-cell">
						<template v-for="(picture, index) in workOrder?.files" :key="index">
							<image :src="picture" mode="aspectFill" @tap="onPreviewImages(workOrder.files, picture)">
							</image>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-if="showOperateInfo" class="card">
			<view class="card__header">
				<view class="card__header-before"></view>
				<text class="card__header-title">{{$t('ops.detail.title')}}</text>
			</view>
			<up-line color="#132034" margin="38rpx 0 30rpx"></up-line>
			<view class="card__content">
				<view class="card-cell">
					<text>{{$t('ops.detail.cell-1')}} {{ operateInfo.operateUser }}</text>
				</view>
				<view class="card-cell">
					<text>{{$t('ops.detail.cell-2')}} {{ dateParse(operateInfo.createTime) }}</text>
				</view>
				<view v-if="operateInfo.cause" class="card-cell">
					<text>{{$t('ops.detail.cell-3')}} {{ operateInfo.solution }}</text>
				</view>
				<view v-if="operateInfo.solution" class="card-cell">
					<text>{{$t('ops.detail.cell-4')}} {{ operateInfo.cause }}</text>
				</view>
				<scroll-view scroll-x>
					<view v-if="operateInfo.images" class="card-images-cell">
						<template v-for="(picture, index) in operateInfo.files" :key="index">
							<image :src="picture" mode="aspectFill" @tap="onPreviewImages(operateInfo.files, picture)">
							</image>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-if="steps.length" class="card">
			<view class="card__header">
				<view class="card__header-before"></view>
				<text class="card__header-title">{{$t('ops.detail.process.title')}}</text>
			</view>
			<up-line color="#132034" margin="38rpx 0 30rpx"></up-line>
			<view class="card__content">
				<up-steps direction="column">
					<up-steps-item v-for="item in steps" :title="joinTitle([$t(item.title), item.operateUser])"
						:desc="dateParse(item.time)" :itemStyle="{ margin: 0 }">
						<template #icon>
							<image class="step-icon" v-if="item.time" src="/static/ops/activeIcon.png"
								mode="aspectFill"></image>
							<image class="step-icon" v-else src="/static/ops/inactiveIcon.png" mode="aspectFill">
							</image>
						</template>
					</up-steps-item>
				</up-steps>
			</view>
		</view>
		<template v-if="workOrder?.status == 1">
			<view class="cancel-action">
				<up-button v-if="workOrder?.isCancelFlag == 1" class="btn" type="primary" size="large" shape="circle"
					plain @tap="showCancelModal = true">{{$t('ops.detail.work.order.cancel')}}</up-button>
				<up-button v-if="workOrder?.isDealFlag == 1" class="btn" type="primary" size="large" shape="circle"
					@tap="showDealModal = true">{{$t('ops.detail.work.order.deal')}}</up-button>
			</view>
			<up-modal :show="showCancelModal" :title="$t('ops.detail.work.order.op.tips.title')"
				:confirm-text="$t('time.confirm')" :cancel-text="$t('time.cancel')"
				:content="$t('ops.detail.work.order.cancel.tips')" contentTextAlign="center" show-cancel-button
				@cancel="showCancelModal = false" @confirm="handleCancel"></up-modal>
			<up-modal :show="showDealModal" :title="$t('ops.detail.work.order.op.tips.title')"
				:confirm-text="$t('time.confirm')" :cancel-text="$t('time.cancel')"
				:content="$t('ops.detail.work.order.deal.tips')" contentTextAlign="center" show-cancel-button
				@cancel="showDealModal = false" @confirm="handleDeal"></up-modal>
		</template>
		<template v-if="workOrder?.isConfirmFlag == 1">
			<view class="confirm-action">
				<up-button type="primary" size="large" shape="circle"
					@tap="showConfirmModal = true">{{$t('ops.detail.work.order.confirm')}}</up-button>
			</view>
			<up-modal :show="showConfirmModal" :title="$t('ops.detail.work.order.op.tips.title')"
				:confirm-text="$t('time.confirm')" :cancel-text="$t('time.cancel')"
				:content="$t('ops.detail.work.order.confirm.tips')" contentTextAlign="center" show-cancel-button
				@cancel="showConfirmModal = false" @confirm="handleConfirm"></up-modal>
		</template>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		ref,
		computed,
		nextTick
	} from "vue";
	import {
		cancelOperate,
		confirmOperate,
		dealOperate,
		selectOperate,
		selectOperateInfo,
		selectOperateRecords
	} from "../../apis/components/operate";
	import dayjs from "dayjs";
	import {
		StatusTypesMap,
		parseSteps
	} from "@/composable/constant/ops.js";
	import {
		useI18n
	} from "vue-i18n";

	const {
		t
	} = useI18n();

	const id = ref(null)

	onLoad((opt) => {
		id.value = opt.id
		nextTick(() => {
			uni.startPullDownRefresh()
		})
	})

	const dateParse = value => value ? dayjs(value).format(t('common.time.format')) : null;
	const strToArr = (str, limit = ';') => (str || '').split(limit).filter(item => !!item);
	const joinTitle = list => list.filter(item => !!item).join('-');

	const workOrder = ref(null);
	const statusConfig = computed(() => StatusTypesMap[workOrder.value?.status])
	const loadOperate = async () => {
		try {
			const data = await selectOperate(id.value);
			data.files = strToArr(data?.picture);
			workOrder.value = data;
			if (![1, 5].includes(data.status)) {
				await loadOperateInfo()
			}
			await loadProcess()
		} catch (err) {
			uni.showToast({
				icon: "none",
				title: typeof err === "string" ? err : err.message
			})
		}
	}
	const operateInfo = ref(null)
	const showOperateInfo = computed(() => operateInfo.value != null)
	const loadOperateInfo = async () => {
		try {
			const data = await selectOperateInfo(id.value);
			data.files = strToArr(data?.images);
			operateInfo.value = data;
		} catch (err) {
			uni.showToast({
				icon: "none",
				title: typeof err === "string" ? err : err.message
			})
		}
	}

	const steps = ref([]);
	const loadProcess = async () => {
		try {
			const data = await selectOperateRecords(id.value);
			steps.value = parseSteps(workOrder.value?.status, data)
		} catch (err) {
			uni.showToast({
				icon: "none",
				title: typeof err === "string" ? err : err.message
			})
		}
	}

	const onPreviewImages = (urls, current) => {
		uni.previewImage({
			urls,
			current
		})
	}

	const showCancelModal = ref(false);
	const handleCancel = async () => {
		uni.showLoading();
		try {
			await cancelOperate(id.value);
			uni.showToast({
				icon: "success",
				title: t('ops.detail.work.order.cancel.successful')
			})
			uni.startPullDownRefresh()
			showCancelModal.value = false;
		} catch (err) {
			uni.showToast({
				icon: "none",
				title: typeof err === "string" ? err : err.message
			})
		}
		uni.hideLoading();
	}

	const showDealModal = ref(false);
	const handleDeal = async () => {
		uni.showLoading();
		try {
			await dealOperate(id.value);
			uni.showToast({
				icon: "success",
				title: t('ops.detail.work.order.deal.successful')
			})
			uni.startPullDownRefresh()
			showConfirmModal.value = false;
		} catch (err) {
			uni.showToast({
				icon: "none",
				title: typeof err === "string" ? err : err.message
			})
		}
		uni.hideLoading();
	}

	const showConfirmModal = ref(false);
	const handleConfirm = async () => {
		uni.showLoading();
		try {
			await confirmOperate(id.value);
			uni.showToast({
				icon: "success",
				title: t('ops.detail.work.order.confirm.successful')
			})
			uni.startPullDownRefresh()
			showConfirmModal.value = false;
		} catch (err) {
			uni.showToast({
				icon: "none",
				title: typeof err === "string" ? err : err.message
			})
		}
		uni.hideLoading();
	}


	onPullDownRefresh(async () => {
		await loadOperate()
		uni.stopPullDownRefresh();
	})
</script>

<style lang="scss" scoped>
	.ops-detail {
		padding: 24rpx 32rpx;

		.card {
			border-radius: 16rpx;
			background-color: #132034;
			padding: 40rpx 32rpx;
			margin: 24rpx 0;

			&__header {
				@include flex(row);
				position: relative;
				justify-content: space-between;

				&-before {
					position: absolute;
					left: -32rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 32rpx;
					border-radius: 0px 8rpx 8rpx 0px;
					background-color: #64B7F6;
				}

				&-title {
					// font-family: Alibaba PuHuiTi 3.0;
					font-size: 32rpx;
					line-height: 1;
					letter-spacing: 0.0145em;
					color: #EEEEEE;
				}

				&-status {
					// font-family: Alibaba PuHuiTi 3.0;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0.0145em;
					color: #64B7F6;
				}
			}

			&__content {
				& ::v-deep .u-steps {
					.u-steps-item__line {
						background-color: rgba(255, 255, 255, 0.28) !important;
					}

					.u-steps-item__content {
						margin-left: 16rpx !important;
						margin-top: 2rpx !important;
						padding-bottom: 62rpx;

						.u-text:nth-child(1) .u-text__value {
							// font-family: Alibaba PuHuiTi 3.0;
							font-size: 32rpx !important;
							line-height: 1 !important;
							letter-spacing: 0.0145em;
							color: #BFBFBF !important;
						}

						.u-text:nth-child(2) .u-text__value {
							// font-family: Alibaba PuHuiTi 3.0;
							margin-top: 19rpx;
							font-size: 24rpx !important;
							line-height: 1 !important;
							letter-spacing: 0.0145em;

							color: rgba(191, 191, 191, 0.65)
						}
					}
				}
			}
		}

		.card-cell {
			&:not(:last-child) {
				margin-bottom: 37rpx;
			}

			text {
				// font-family: PingFangSC;
				font-size: 28rpx;
				line-height: 1;
				letter-spacing: 0.0145em;
				color: #BFBFBF;
			}
		}

		.card-images-cell {
			@include flex(rows);

			image {
				flex: none;
				width: 192rpx;
				height: 130rpx;
				border-radius: 16rpx;
				border: 1px solid #707070;

				&:not(:last-child) {
					margin-right: 24rpx;
				}
			}
		}

		.step-icon {
			width: 36rpx;
			height: 36rpx;
		}

		.cancel-action,
		.confirm-action {
			margin-top: 40rpx;
			@include flex(row);
			justify-content: end;

			.btn {
				min-width: 220rpx;
				width: fit-content;
				margin: 0;
			}
		}
	}
</style>